<template>
    <va-list>
        <va-list-label color="black">{{label}}</va-list-label>
    
        <va-list-item v-for="(contact, index) in datas" :key="index" style="margin-bottom: 5px;">
          <va-list-item-section avatar>
            <va-avatar size="42px"> <img :src="contact.img" ></va-avatar>
          </va-list-item-section>
    
          <va-list-item-section>
            <va-list-item-label style="font-size:14px;font-weight:bold;color:black;width: 200px;">{{ contact.name }}</va-list-item-label>
            <va-list-item-label caption style="font-size:12px;margin-top: 2px;;width: 200px;">{{ contact.message }}</va-list-item-label>
          </va-list-item-section>

          <va-list-item-section>
            <va-list-item-label v-if="!isPhoto" style="font-size:13px;color:rgba(128,128,128,0.5);width: 200px;text-align: center;margin-top: -10px;">
                {{ contact.time }}
            </va-list-item-label>
            <va-list-item-label v-if="isPhoto" style="width: 200px;margin-top: -10px;text-align: center;">
                <img class="img2" :src="contact.time">
            </va-list-item-label>
          </va-list-item-section>
        </va-list-item>
    </va-list>
</template>

<script>
import {reactive,toRefs} from 'vue'
export default {
    props:{
        mess:Array,
        more:String,
        photo:Boolean
    },
    setup(props){
        const state=reactive({
            datas:props.mess,
            label:props.more,
            isPhoto:props.photo
        })
        return {...toRefs(state)};
    }
}
</script>

<style scoped>
.va-list{
    width: 345px;
    margin: 0 auto;
    height: 450px;
}
.va-list-label{
    font-size: 13px;
    float: left;
    margin-left: 10px;
    margin-bottom: 5px;
}
.img2{
    width: 48px;
    height: 48px;
    border-radius: 10px;
}
</style>